<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听版本(了解)</title>
</head>
<body>
<h3>事件监听版本</h3>
<p>
    DOM L0 <br>
    事件源.on事件 = function() { } <br>
    DOM L2 <br>
    事件源.addEventListener(事件， 事件处理函数) <br>
    区别： <br>
    on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
</p>
<p>
    发展史： <br>
    DOM L0 ：是 DOM 的发展的第一个版本； L：level <br>
    DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准 <br>
    DOM L2：使用addEventListener注册事件 <br>
    DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
</p>
<hr>
<p>
    了解下就行了, 我们所以 DOM L2 写法 <br>
    DOM L3 与 L2相同, 只是添加了新的功能
</p>
<hr>
<!--按钮标签-->
<button class="按钮1">点击1</button>
<button class="按钮2">点击2</button>


<script>
    const 按钮1 = document.querySelector('.按钮1')
    按钮1.onclick = function () {
      alert(11)
    }
    按钮1.onclick = function () {
      alert(22)
    }
    // 上面写法会出现 覆盖现象. 了解下就行 淘汰的我们不使用


    // 下面的是我们使用的 事件监听 写法,不会出现覆盖现象
    const 按钮2 = document.querySelector('.按钮2')

    按钮2.addEventListener('click', function () {
        alert(11)
    })
    按钮2.addEventListener('click', function () {
        alert(22)
    })
</script>

</body>
</html>